<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>m音乐</title>
    <link rel="icon" href="images/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="css/font-awesome.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <!-- <link rel="stylesheet" href="css/style.css"> -->
    <link rel="stylesheet" href="css/page.css">
    <link rel="stylesheet" href="css/footer.css">
    <link rel="stylesheet" href="css/header.css">
    <style>
        body{
    background-color: rgba(0, 0, 117, 0.3);
    }
    </style>
</head>
<div class="mlist center-block">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <span class="listitle text-left">M-music 特色榜 </span>
                <span class="week"> &nbsp;&nbsp;&nbsp;< 30周 ></span>
                <div class="feaure-list">

                    <div class="top-but">
                        <button class="all"><i class="iconfont">&#xe626;</i>播放全部</button>
                        <button class="other"><i class="iconfont">&#xe60a;</i> 添加到</button>
                        <button class="other"><i class="iconfont">&#xe631;</i> 下载</button>
                        <button class="other"><i class="iconfont">&#xe60c;</i> 评论</button>
                    </div>

                    <table class="detail-content text-left">
                        <tr>
                            <td></td>
                            <td colspan="2">歌名</td>
                            <td>歌手</td>
                            <td>时长</td>
                            <td>分类</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td class="text-center num mred">01</td>
                            <td colspan="2"><img src="images/test05.jpg" alt="">
                                <a href="#">飞鸟与蝉</a></td>
                            <td><a href="#"> 任然</a></td>
                            <td><a href="#"> 04:56</a></td>
                            <td><a href="#"> 飙升指数</a></td>
                            <td class="text-center">
                                <a href="#"><i class="iconfont">&#xe626;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe60a;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe607;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe604;
                                    </i></a>
                            </td>
                        </tr>
                        <tr>
                            <td class="text-center num mred">02</td>
                            <td colspan="2"><img src="images/test07.jpg" alt="">
                                <a href="#">爱，存在</a></td>
                            <td><a href="#"> 林小珂</a></td>
                            <td><a href="#"> 04:44</a></td>
                            <td><a href="#"> 网络热歌榜</a></td>
                            <td class="text-center">
                                <a href="#"><i class="iconfont">&#xe626;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe60a;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe607;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe604;
                                    </i></a>
                            </td>
                        </tr>
                        <tr>
                            <td class="text-center num mred">03</td>
                            <td colspan="2"><img src="images/test09.jpg" alt="">
                                <a href="#">Swagger (画风风 Bootleg)</a></td>
                            <td><a href="#"> P.W.W.画风风</a></td>
                            <td><a href="#"> 04:56</a></td>
                            <td><a href="#"> DJ舞曲榜</a></td>
                            <td class="text-center">
                                <a href="#"><i class="iconfont">&#xe626;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe60a;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe607;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe604;
                                    </i></a>
                            </td>
                        </tr>
                        <tr>
                            <td class="text-center num">04</td>
                            <td colspan="2"><img src="images/test11.jpg" alt="">
                                <a href="#">我爱你不问归期</a></td>
                            <td><a href="#"> 白小白</a></td>
                            <td><a href="#"> 04:14</a></td>
                            <td><a href="#"> Q音快手榜</a></td>
                            <td class="text-center">
                                <a href="#"><i class="iconfont">&#xe626;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe60a;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe607;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe604;
                                    </i></a>
                            </td>
                        </tr>
                        <tr>
                            <td class="text-center num">05</td>
                            <td colspan="2"><img src="images/test13.jpg" alt="">
                                <a href="#">爸爸妈妈</a></td>
                            <td><a href="#"> 李荣浩</a></td>
                            <td><a href="#"> 04:44</a></td>
                            <td><a href="#"> 抖音排行榜</a></td>
                            <td class="text-center">
                                <a href="#"><i class="iconfont">&#xe626;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe60a;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe607;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe604;
                                    </i></a>
                            </td>
                        </tr>
                        <tr>
                            <td class="text-center num">06</td>
                            <td colspan="2"><img src="images/test15.jpg" alt="">
                                <a href="#">无价之姐 (Live)</a></td>
                            <td><a href="#"> 王霏霏</a></td>
                            <td><a href="#"> 04:06</a></td>
                            <td><a href="#"> 综艺新歌榜</a></td>
                            <td class="text-center">
                                <a href="#"><i class="iconfont">&#xe626;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe60a;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe607;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe604;
                                    </i></a>
                            </td>
                        </tr>
                        <tr>
                            <td class="text-center num">07</td>
                            <td colspan="2"><img src="images/test17.jpg" alt="">
                                <a href="#">王霏霏</a></td>
                            <td><a href="#"> 鹿晗</a></td>
                            <td><a href="#"> 04:22</a></td>
                            <td><a href="#"> 影视金曲榜</a></td>
                            <td class="text-center">
                                <a href="#"><i class="iconfont">&#xe626;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe60a;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe607;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe604;
                                    </i></a>
                            </td>
                        </tr>
                        <tr>
                            <td class="text-center num">08</td>
                            <td colspan="2"><img src="images/test19.jpg" alt="">
                                <a href="#">春庭雪</a></td>
                            <td><a href="#"> 等什么君</a></td>
                            <td><a href="#"> 04:00</a></td>
                            <td><a href="#"> 国风热歌榜</a></td>
                            <td class="text-center">
                                <a href="#"><i class="iconfont">&#xe626;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe60a;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe607;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe604;
                                    </i></a>
                            </td>
                        </tr>
                        <tr>
                            <td class="text-center num">09</td>
                            <td colspan="2"><img src="images/test01.jpg" alt="">
                                <a href="#">Summer Holiday (Live)</a></td>
                            <td><a href="#"> Rarpid望江晴</a></td>
                            <td><a href="#"> 04:34</a></td>
                            <td><a href="#"> 说唱榜</a></td>
                            <td class="text-center">
                                <a href="#"><i class="iconfont">&#xe626;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe60a;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe607;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe604;
                                    </i></a>
                            </td>
                        </tr>
                        <tr>
                            <td class="text-center num">10</td>
                            <td colspan="2"><img src="images/test03.jpg" alt="">
                                <a href="#">What You Waiting For</a></td>
                            <td><a href="#"> 全昭弥 (전소미)</a></td>
                            <td><a href="#"> 02:56</a></td>
                            <td><a href="#"> 电音榜</a></td>
                            <td class="text-center">
                                <a href="#"><i class="iconfont">&#xe626;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe60a;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe607;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe604;
                                    </i></a>
                            </td>
                        </tr>
                        <tr>
                            <td class="text-center num">11</td>
                            <td colspan="2"><img src="images/test02.jpg" alt="">
                                <a href="#">破茧《斗罗大陆》主题曲</a></td>
                            <td><a href="#"> 张韶涵</a></td>
                            <td><a href="#"> 03:31</a></td>
                            <td><a href="#"> 动漫音乐榜</a></td>
                            <td class="text-center">
                                <a href="#"><i class="iconfont">&#xe626;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe60a;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe607;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe604;
                                    </i></a>
                            </td>
                        </tr>
                        <tr>
                            <td class="text-center num">12</td>
                            <td colspan="2"><img src="images/test04.jpg" alt="">
                                <a href="#">决斗场见《火影忍者》主题曲</a></td>
                            <td><a href="#"> 张韶涵</a></td>
                            <td><a href="#"> 03:18</a></td>
                            <td><a href="#"> 游戏音乐榜</a></td>
                            <td class="text-center">
                                <a href="#"><i class="iconfont">&#xe626;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe60a;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe607;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe604;
                                    </i></a>
                            </td>
                        </tr>
                        <tr>
                            <td class="text-center num">13</td>
                            <td colspan="2"><img src="images/test06.jpg" alt="">
                                <a href="#">Maria (原唱: 华莎)Hate for what？</a></td>
                            <td><a href="#"> Wbspo</a></td>
                            <td><a href="#"> 01:14</a></td>
                            <td><a href="#"> 达人音乐榜</a></td>
                            <td class="text-center">
                                <a href="#"><i class="iconfont">&#xe626;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe60a;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe607;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe604;
                                    </i></a>
                            </td>
                        </tr>
                        <tr>
                            <td class="text-center num">14</td>
                            <td colspan="2"><img src="images/test08.jpg" alt="">
                                <a href="#">Mojito</a></td>
                            <td><a href="#"> 周杰伦</a></td>
                            <td><a href="#"> 03:56</a></td>
                            <td><a href="#"> K歌金曲榜</a></td>
                            <td class="text-center">
                                <a href="#"><i class="iconfont">&#xe626;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe60a;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe607;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe604;
                                    </i></a>
                            </td>
                        </tr>
                        <tr>
                            <td class="text-center num">15</td>
                            <td colspan="2"><img src="images/test10.jpg" alt="">
                                <a href="#">难题</a></td>
                            <td><a href="#"> 谢宇伦</a></td>
                            <td><a href="#"> 04:56</a></td>
                            <td><a href="#"> 腾讯音乐人原创榜</a></td>
                            <td class="text-center">
                                <a href="#"><i class="iconfont">&#xe626;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe60a;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe607;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe604;
                                    </i></a>
                            </td>
                        </tr>
                        <tr>
                            <td class="text-center num">16</td>
                            <td colspan="2"><img src="images/test12.jpg" alt="">
                                <a href="#">无价之姐</a></td>
                            <td><a href="#"> 李宇春</a></td>
                            <td><a href="#"> 03:56</a></td>
                            <td><a href="#"> 综艺新歌榜</a></td>
                            <td class="text-center">
                                <a href="#"><i class="iconfont">&#xe626;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe60a;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe607;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe604;
                                    </i></a>
                            </td>
                        </tr>
                        <tr>
                            <td class="text-center num">17</td>
                            <td colspan="2"><img src="images/test14.jpg" alt="">
                                <a href="#">误红妆</a></td>
                            <td><a href="#"> 等什么君</a></td>
                            <td><a href="#"> 03:56</a></td>
                            <td><a href="#"> 国风热歌榜</a></td>
                            <td class="text-center">
                                <a href="#"><i class="iconfont">&#xe626;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe60a;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe607;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe604;
                                    </i></a>
                            </td>
                        </tr>
                        <tr>
                            <td class="text-center num">18</td>
                            <td colspan="2"><img src="images/test16.jpg" alt="">
                                <a href="#">飞鸟天上的星星不说话 (Live)与蝉</a></td>
                            <td><a href="#"> 俞天时KOZAY</a></td>
                            <td><a href="#"> 04:01</a></td>
                            <td><a href="#"> 电音版</a></td>
                            <td class="text-center">
                                <a href="#"><i class="iconfont">&#xe626;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe60a;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe607;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe604;
                                    </i></a>
                            </td>
                        </tr>
                        <tr>
                            <td class="text-center num">19</td>
                            <td colspan="2"><img src="images/test18.jpg" alt="">
                                <a href="#">海来阿木</a></td>
                            <td><a href="#">张主任</a></td>
                            <td><a href="#"> 02:56</a></td>
                            <td><a href="#"> 网络热歌榜</a></td>
                            <td class="text-center">
                                <a href="#"><i class="iconfont">&#xe626;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe60a;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe607;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe604;
                                    </i></a>
                            </td>
                        </tr>
                        <tr>
                            <td class="text-center num">20</td>
                            <td colspan="2"><img src="images/test20.jpg" alt="">
                                <a href="#">你的万水千山</a></td>
                            <td><a href="#"> 海来阿木</a></td>
                            <td><a href="#"> 04:09</a></td>
                            <td><a href="#"> Q音快手榜</a></td>
                            <td class="text-center">
                                <a href="#"><i class="iconfont">&#xe626;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe60a;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe607;
                                    </i></a>
                                <a href="#"><i class="iconfont">&#xe604;
                                    </i></a>
                            </td>
                        </tr>

                    </table>

                    <h2 class="comment-title">评论
                        <span class="comment-subtitle"> 共6536条评论</span>
                    </h2>
                    <textarea cols="30" rows="5" placeholder="期待你的评论..."></textarea>
                    <div class="submit-comment text-right">
                        <a href="#"><i class="iconfont">&#x3435;</i></a>
                        <button>发表评论</button>
                    </div>
                    <div class="comment-area">
                        <h2>最新评论（65条）</h2>

                        <div class="area-list clearfix">
                            <img src="images/user1.jpg" class="fl">
                            <div class="fl clearfix area-content">
                                <p class="username">妍妍</p>
                                <p>破</p>
                                <span class="time">7月27日 04:56</span>
                                <span class="fr">
                                   <a href="#"> <i class="iconfont">&#xfd10;</i></a>
                                    <a href="#"><i class="iconfont">&#xe613;</i></a>
                                </span>
                            </div>
                        </div>
                        <div class="area-list clearfix">
                            <img src="images/user2.jpg" class="fl">
                            <div class="fl clearfix area-content">
                                <p class="username">妍妍</p>
                                <p>破</p>
                                <span class="time">7月27日 04:56</span>
                                <span class="fr">
                                   <a href="#"> <i class="iconfont">&#xfd10;</i></a>
                                    <a href="#"><i class="iconfont">&#xe613;</i></a>
                                </span>
                            </div>
                        </div>
                        <div class="area-list clearfix">
                            <img src="images/user3.jpg" class="fl">
                            <div class="fl clearfix area-content">
                                <p class="username">BLURRY™FACE</p>
                                <p>华莎听歌识曲榜一位！</p>
                                <span class="time">7月18日 15:41</span>
                                <span class="fr">
                                   <a href="#"> <i class="iconfont">&#xfd10;</i></a>
                                    <a href="#"><i class="iconfont">&#xe613;</i></a>
                                </span>
                            </div>
                        </div>
                        <div class="area-list clearfix">
                            <img src="images/user4.jpg" class="fl">
                            <div class="fl clearfix area-content">
                                <p class="username">明月清风</p>
                                <p>你读夺命哦哦soup运送哦lz您1YY你搜慕名敏敏1YY1我走咯屠民</p>
                                <span class="time">7月14日 21:56</span>
                                <span class="fr">
                                   <a href="#"> <i class="iconfont">&#xfd10;</i></a>
                                    <a href="#"><i class="iconfont">&#xe613;</i></a>
                                </span>
                            </div>
                        </div>
                        <div class="area-list clearfix">
                            <img src="images/user5.jpg" class="fl">
                            <div class="fl clearfix area-content">
                                <p class="username">The heartbeat 心跳🖤</p>
                                <p>好听</p>
                                <span class="time">7月1日 18:20</span>
                                <span class="fr">
                                   <a href="#"> <i class="iconfont">&#xfd10;</i></a>
                                    <a href="#"><i class="iconfont">&#xe613;</i></a>
                                </span>
                            </div>
                        </div>
                        <div class="area-list clearfix">
                            <img src="images/user6.jpg" class="fl">
                            <div class="fl clearfix area-content">
                                <p class="username">开心的小仙女</p>
                                <p>太好听了，耳朵怀孕了</p>
                                <span class="time">6月26日 14:17</span>
                                <span class="fr">
                                   <a href="#"> <i class="iconfont">&#xfd10;</i></a>
                                    <a href="#"><i class="iconfont">&#xe613;</i></a>
                                </span>
                            </div>
                        </div>
                        <div class="area-list clearfix">
                            <img src="images/user7.jpg" class="fl">
                            <div class="fl clearfix area-content">
                                <p class="username">宇智波斑</p>
                                <p>好！（此评论虽然才1个字，但语法严谨，用词工整，结构巧妙，琅琅上口，可谓言简意赅，足见评论人扎实的文字功底，以及信手拈来的写作技巧和惨绝人寰的创造能力，令人佩服佩服，再加上以感叹号收尾，实在是点睛之笔，再看右边 99更加肯定这位作家的吸引能力之强，绝对是前无古人后无来者之辈！</p>
                                <span class="time">6月14日 16:47</span>
                                <span class="fr">
                                   <a href="#"> <i class="iconfont">&#xfd10;</i></a>
                                    <a href="#"><i class="iconfont">&#xe613;</i></a>
                                </span>
                            </div>
                        </div>
                        <div class="area-list clearfix">
                            <img src="images/user8.jpg" class="fl">
                            <div class="fl clearfix area-content">
                                <p class="username">dinosaur</p>
                                <p>靠数据说话的周董</p>
                                <span class="time">
                                    6月13日 15:21</span>
                                <span class="fr">
                                   <a href="#"> <i class="iconfont">&#xfd10;</i></a>
                                    <a href="#"><i class="iconfont">&#xe613;</i></a>
                                </span>
                            </div>
                        </div>
                        <div class="area-list clearfix">
                            <img src="images/user9.jpg" class="fl">
                            <div class="fl clearfix area-content">
                                <p class="username">妍妍</p>
                                <p>破</p>
                                <span class="time">7月27日 04:56</span>
                                <span class="fr">
                                   <a href="#"> <i class="iconfont">&#xfd10;</i></a>
                                    <a href="#"><i class="iconfont">&#xe613;</i></a>
                                </span>
                            </div>
                        </div>
                        <div class="area-list clearfix">
                            <img src="images/user10.jpg" class="fl">
                            <div class="fl clearfix area-content">
                                <p class="username">S.J.K</p>
                                <p>JackTom了旅途太酷了哭哭哭哭哭哭哭哭哭哭哭哭啦噜里输入我大例如我就我大句日咯大句我了</p>
                                <span class="time">6月13日 14:04</span>
                                <span class="fr">
                                   <a href="#"> <i class="iconfont">&#xfd10;</i></a>
                                    <a href="#"><i class="iconfont">&#xe613;</i></a>
                                </span>
                            </div>
                        </div>
                        <div class="area-list clearfix">
                            <img src="images/user10.jpg" class="fl">
                            <div class="fl clearfix area-content">
                                <p class="username">S.J.K</p>
                                <p>JackTom了旅途太酷了哭哭哭哭哭哭哭哭哭哭哭哭啦噜里输入我大例如我就我大句日咯大句我了</p>
                                <span class="time">6月13日 14:04</span>
                                <span class="fr">
                                   <a href="#"> <i class="iconfont">&#xfd10;</i></a>
                                    <a href="#"><i class="iconfont">&#xe613;</i></a>
                                </span>
                            </div>
                        </div>
                        <div class="area-list clearfix">
                            <img src="images/user11.jpg" class="fl">
                            <div class="fl clearfix area-content">
                                <p class="username">妍妍</p>
                                <p>破</p>
                                <span class="time">7月27日 04:56</span>
                                <span class="fr">
                                   <a href="#"> <i class="iconfont">&#xfd10;</i></a>
                                    <a href="#"><i class="iconfont">&#xe613;</i></a>
                                </span>
                            </div>
                        </div>
                        <div class="area-list clearfix">
                            <img src="images/user12.jpg" class="fl">
                            <div class="fl clearfix area-content">
                                <p class="username">妍妍</p>
                                <p>听歌识曲，用科技发现美好音乐生活，为你展现QQ音乐用户每日在大街小巷上用“听歌识曲”功能捕捉到的陌生好歌，第一时间传递流行趋势。
                                   </p>
                                <span class="time"> 5月30日 14:23</span>
                                <span class="fr">
                                   <a href="#"> <i class="iconfont">&#xfd10;</i></a>
                                    <a href="#"><i class="iconfont">&#xe613;</i></a>
                                </span>
                            </div>
                        </div>
                        <div class="area-list clearfix">
                            <img src="images/user13.jpg" class="fl">
                            <div class="fl clearfix area-content">
                                <p class="username">双子🔮</p>
                                <p>sf：温馨提示：沙发️
                                    </p>
                                <span class="time">5月28日 11:20</span>
                                <span class="fr">
                                   <a href="#"> <i class="iconfont">&#xfd10;</i></a>
                                    <a href="#"><i class="iconfont">&#xe613;</i></a>
                                </span>
                            </div>
                        </div>
                        <div class="area-list clearfix">
                            <img src="images/user14.jpg" class="fl">
                            <div class="fl clearfix area-content">
                                <p class="username">梦想创造生活</p>
                                <p>我好喜欢 柏奈儿 家拍出来的斗音视频
                                    </p>
                                <span class="time">5月7日 11:22</span>
                                <span class="fr">
                                   <a href="#"> <i class="iconfont">&#xfd10;</i></a>
                                    <a href="#"><i class="iconfont">&#xe613;</i></a>
                                </span>
                            </div>
                        </div>
                        <div class="area-list clearfix">
                            <img src="images/user15.jpg" class="fl">
                            <div class="fl clearfix area-content">
                                <p class="username">枪手酷妍\（柠檬茶🍋）</p>
                                <p>第一首歌是黑人抬棺材的歌🤣🤣
                                   </p>
                                <span class="time"> 4月14日 13:02</span>
                                <span class="fr">
                                   <a href="#"> <i class="iconfont">&#xfd10;</i></a>
                                    <a href="#"><i class="iconfont">&#xe613;</i></a>
                                </span>
                            </div>
                        </div>
                        <div class="area-list clearfix">
                            <img src="images/user16.jpg" class="fl">
                            <div class="fl clearfix area-content">
                                <p class="username">澶、</p>
                                <p>如果你不
                                    </p>
                                <span class="time">4月1日 15:30</span>
                                <span class="fr">
                                   <a href="#"> <i class="iconfont">&#xfd10;</i></a>
                                    <a href="#"><i class="iconfont">&#xe613;</i></a>
                                </span>
                            </div>
                        </div>
                        <div class="area-list clearfix">
                            <img src="images/user17.jpg" class="fl">
                            <div class="fl clearfix area-content">
                                <p class="username">妍妍</p>
                                <p>破</p>
                                <span class="time">7月27日 04:56</span>
                                <span class="fr">
                                   <a href="#"> <i class="iconfont">&#xfd10;</i></a>
                                    <a href="#"><i class="iconfont">&#xe613;</i></a>
                                </span>
                            </div>
                        </div>
                        <div class="area-list clearfix">
                            <img src="images/user18.jpg" class="fl">
                            <div class="fl clearfix area-content">
                                <p class="username">bj@z🏃
                                    </p>
                                <p>好玩又好听
                                    </p>
                                <span class="time">3月31日 16:38</span>
                                <span class="fr">
                                   <a href="#"> <i class="iconfont">&#xfd10;</i></a>
                                    <a href="#"><i class="iconfont">&#xe613;</i></a>
                                </span>
                            </div>
                        </div>
                        <div class="area-list clearfix">
                            <img src="images/user19.jpg" class="fl">
                            <div class="fl clearfix area-content">
                                <p class="username">妍妍</p>
                                <p>破</p>
                                <span class="time">7月27日 04:56</span>
                                <span class="fr">
                                   <a href="#"> <i class="iconfont">&#xfd10;</i></a>
                                    <a href="#"><i class="iconfont">&#xe613;</i></a>
                                </span>
                            </div>
                        </div>
                        <div class="area-list clearfix">
                            <img src="images/user20.jpg" class="fl">
                            <div class="fl clearfix area-content">
                                <p class="username">ZZbY025
                                    </p>
                                <p>这个榜单有点优秀，哈哈可以随便收藏了
                                    </p>
                                <span class="time">2月26日 00:50</span>
                                <span class="fr">
                                   <a href="#"> <i class="iconfont">&#xfd10;</i></a>
                                    <a href="#"><i class="iconfont">&#xe613;</i></a>
                                </span>
                            </div>
                        </div>

                        <div class="area-but text-center">
                            <a href="#">1</a>
                            <a href="#">2</a>
                            <a href="#">3</a>
                            <a href="#">></a>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

</html>